import React, { Component } from 'react';
import './style.scss';
import {TransitionGroup, CSSTransition} from 'react-transition-group';

class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [
        {
          id: 1,
          text: 'learn HTML'
        },
        {
          id: 2,
          text: 'learn CSS'
        },
        {
          id: 3,
          text: 'learn JavaScript'
        }
      ]
    };
  }
  fnAdd = () => {
    this.setState({
      list: [
        ...this.state.list,
        {
          id: Math.round(Math.random() * 10000),
          text: Math.random()
        }
      ]
    });
  }
  fnRemove = (id) => {
    this.setState({
      list: this.state.list.filter(item => item.id !== id)
    });
  }
  render() { 
    return (
      <div>
        <h2>ToDo List</h2>
        <button onClick={this.fnAdd}>添加</button>
        <ul>
          <TransitionGroup>
            {
              this.state.list.map(item => (
                <CSSTransition
                  key={item.id}
                  timeout={500}
                  classNames="smooth"
                >
                  <li>
                    <button onClick={this.fnRemove.bind(this, item.id)}>&times;</button>
                    {item.text}
                  </li>
                </CSSTransition>
              ))
            }
          </TransitionGroup>
        </ul>
      </div>
    );
  }
}
 
export default List;